<template>
  <!-- 用户管理 -->
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__user">
      <el-form>
        <el-form-item>
          <el-input clearable class="inputuser"  v-model="dataForm.name" @clear="onclear" placeholder="姓名"></el-input>

          <!-- <el-input  class="inputuser"  v-model="dataForm.userId" placeholder="身份证" clearable></el-input> -->
          <!-- 所在党组织 -->
          <!-- <el-select v-model="organization" clearable placeholder="所在党组织">
            <el-option v-for="item in patyList" :key="item.id" :value="item.name"></el-option>
          </el-select> -->
            <!-- 党员发展阶段 -->
          <!-- <el-select clearable v-model="dataForm.stage" placeholder="党员发展阶段">
          </el-select>
           -->
          <el-button @click="inquire">查询</el-button>

          <el-button @click="adduser" type="primary" :disabled="showadd">新增</el-button>

          <!-- <el-button >删除</el-button> -->
        </el-form-item>
      </el-form>
      <el-tabs v-model="userTabs" type="border-card">
        <!-- <el-tab-pane label="软件工程学院"> -->
          <el-table :data="userlistinfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" 
          :key="userTabs" border style="width: 100%">
            <el-table-column
              prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="gender"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="phoneNumber"
              label="手机号码">
            </el-table-column>
            <el-table-column
              prop="censusAddress"
              label="户籍地址">
            </el-table-column>
            <el-table-column
              prop="academyName"
              label="院系">
            </el-table-column>
            <el-table-column
              prop="className"
              label="班级">
            </el-table-column>
            <el-table-column
              prop="politics"
              label="发展阶段">
            </el-table-column>
            <!-- <el-table-column
              prop="partyOrganizationName"
              label="所在党组织">
            </el-table-column> -->
            <el-table-column
              prop="partyStanding"
              label="党龄">
            </el-table-column>
            <!-- <el-table-column
              prop=""
              label="处理状态">
            </el-table-column> -->
            <el-table-column
              prop="id"
              label="操作" width="130">
              <template slot-scope="scope">
                <i class="el-icon-view information" @click="detailed(userToken,scope.row.id)"></i>
                <!-- <span class="information">查看详细信息</span> -->
                <!-- <span><el-button>删除</el-button></span> -->
                <i class="el-icon-delete information" @click="del(scope.row.id)"></i>
              </template>
            </el-table-column>
          </el-table>
        <!-- </el-tab-pane> -->
      </el-tabs>
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper"
          :total="total">
        </el-pagination>
      </div>
      <!-- 新增按钮弹窗 -->
      <addBullet @userList="userList" ref="addFarm" v-if="addFrame" :personInfo="patyList"  @toclose="dialogConfirm(addFrame)"></addBullet>
      <!-- 查看用户详细信息弹框 -->
      <userDetail ref="addDetil" v-if="showdetailed"  @toclose="cancel(detail)"></userDetail>
    </div>
  </el-card>
</template>

<script>
// import axios from "axios"
import addBullet from "./user_addFarm.vue"
import userDetail from "./user_detailed.vue"
export default {
  components:{
    addBullet,userDetail
  },
  data(){
    return{
      dataForm:{
        name:"",//姓名
        stage:"",//党员发展阶段
        collegeId:"",//学院id
        classId:"",//班级id
        majorId:"",//专业id
        roleId:"",//权限id
      },
      showdetailed:false,//是否显示用户详细信息弹框
      organization:"",//所在党组织
      userlistinfo:[],//用户列表
      addFrame:false,//新增用户弹框
      eventItem:null,
      patyList:[],//党组织列表
      userTabs:"",//tabs切换
      // totalPage:0,//总共页数
      // currentPage:1,
      // pagnumber:0,//当前页码
      // pageSize: 5, // 每页显示数量
      total:0,//总条数
      currentPage: 1,//当前页
      pageSize: 7,//每页显示数量
      userToken:0,//用户点击弹框状态
      myauthority:"",//当前登录用户的权限
      academykey:"",//我的学院id
      showadd:false,//是否禁用新增按钮
    }
  },
  created(){
    // console.log("我进来啦")
  },
  mounted(){
    // spc:学校党委 最高权限
    // cpc:学院党委 管理员权限
    // bc:支部 三级权限
    // dc:普通用户
    // console.log("请求")
    this.myauthority = JSON.parse(localStorage.getItem('userinfo'))
    // console.log(this.myauthority.authority[0].authority)
    this.organizationList()//获取党组织列表
    this.college()//获取学院列表
    if(this.myauthority.authority[0].authority=="spc"){
      this.userList(this.pageSize,this.currentPage)//最高权限(获取用户列表)
    }else
      this.myxiangxiinfo()//学院级权限(获取用户列表)
    if(this.myauthority.authority[0].authority!=="spc"){
      this.showadd = true
    }
  },
  methods:{
    userList(){//校级管理员用户列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/user/getUserListInfo?pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
        // url:`/user/getUserListInfo`,
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        var info = {}
        // 匹配到用户的详细信息
        var logininfo = JSON.parse(localStorage.getItem('userinfo'))
        // console.log(logininfo)
        for(var i=0;i<res.data.data.list.length;i++){
          if(res.data.data.list[i].id==logininfo.token){
            info = res.data.data.list[i]
          }
        }
        localStorage.setItem('logininfo',JSON.stringify(info))
        // console.log(info)
        this.userlistinfo = res.data.data.list
        // console.log(res.data.data.list)
        this.total = res.data.data.totals
      })
    },
    collegeuserList(){//院级管理员获取用户列表
      // console.log(this.academykey)
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/user/getUserListInfo?academyId=${this.academykey}&pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        var info = {}
        // 匹配到用户的详细信息
        var logininfo = JSON.parse(localStorage.getItem('userinfo'))
        // console.log(logininfo)
        for(var i=0;i<res.data.data.list.length;i++){
          if(res.data.data.list[i].id==logininfo.token){
            info = res.data.data.list[i]
          }
        }
        localStorage.setItem('logininfo',JSON.stringify(info))
        // console.log(info)
        this.userlistinfo = res.data.data.list
        this.total = res.data.data.totals
      })
    },
    myxiangxiinfo(){//查看我的详细信息
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:`api/user/getCurrentUserInfo`,
        url:`/user/getCurrentUserInfo`,
      }).then(res=>{
        var academyName = res.data.data.academyName
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        // console.log(this.collegelist)
        for(var i=0;i<this.collegelist.length;i++){
          if(academyName==this.collegelist[i].academyName){
            this.academykey = this.collegelist[i].id
          }
        }
        this.collegeuserList()
      })
    },
    adduser(val){//点击新增按钮
      // console.log(val)
      this.addFrame = true
      this.$nextTick(() => {
        this.$refs.addFarm.init()
      })
    },
    dialogConfirm(val){//取消弹窗
      this.addFrame = false
      // console.log(val)
    },
    inquire(){//查询
      // console.log(this.dataForm)
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        url:`/user/getUserListInfo?name=${this.dataForm.name}`
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.userlistinfo = res.data.data.list
        this.total = res.data.data.totals
      })
    },
    organizationList(){//党组织列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        // url:"api/organization/getOrganizationList",
        url:"/organization/getOrganizationList",
        method:"get",
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        else{
          this.patyList = res.data.data
        }
      })
    },
    handleCurrentChange(val){//当前页
      // console.log(val)
      this.currentPage = val
      this.userList()
      this.currentPage=1
    },
    handleSizeChange(val) {//每页显示条数
      // console.log(val)
      // this.pageSize = val
      // // this.userList()
      // // 点击每页显示的条数时，显示第一页
      // this.userList(val,1)
      // // 注意：在改变每页显示的条数时，要将页码显示到第一页
      // this.currentPage=1  
      // console.log(this.userlistinfo)
    },
    detailed(id,token){//查看用户详细信息
      // console.log(e)
      this.showdetailed = true
      this.$nextTick(() => {
        this.$refs.addDetil.init(id,token)
      })
    },
    del(e){//删除用户
    // console.log(e)
      this.$confirm('确定要删除此用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios({
            headers:{'Authentication':localStorage.getItem('token')},
            method:"put",
            // url:`api/user/remove?userIdList=${e}`,
            url:`/user/remove?userIdList=${e}`,
            // data:{"userIdList":e},
          }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.userList(this.pageSize,this.currentPage)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    onclear(){//清空姓名模糊查询框
      this.userList(this.pageSize,this.currentPage)
    },
    college(){//获取学院列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:`api/academy/getAcademyList`,
        url:`/academy/getAcademyList`,
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.collegelist = res.data.data
      })
    },
  }
}
</script>

<style lang="scss">
.aui-card--fill{
  .mod-sys__user{
    .inputuser{
      width: 16vw;
      margin-right: 1vw;
    }
    .el-select{
      margin-right: 1vw;
    }
    .el-tabs{
      height: 70vh;
    }
    .paginationBlock{
      position: absolute;
      bottom: 10vh;
      left: 0;
      width: 100%;
      // border: 1px solid #000;
    }
    .el-pagination{
      text-align: center;
    }
    th{
      text-align: center;
    }
    td{
      text-align: center;
    }
    .information{
      color: royalblue;
      cursor: pointer;
      font-size: 1.3em;
      margin: 0 0.6vw;
    }
    .el-icon-delete{
      color: red;
    }
    // .has-gutter{
    //   tr{
    //     th{
    //       text-align: center;
    //     }
    //   }
    // }
    // .el-table__body-wrapper{
    //   text-align: center;
    //   .el-table__body{
    //     tbody{
    //       tr{
    //         td{
    //           text-align: center;
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>